import { OnInit, Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-music-slider-track',
  template: `<div class="music-slider-track" [class.buffer]="isBuffer" [ngStyle]="trackStyle"></div>`,
  styleUrls: ['./music-slider.component.less']
})
export class MusicSliderTrackComponent implements OnInit, OnChanges {

  /** 滑动条是否垂直，默认 false */
  @Input('vertical')
  isVertical = false;

  @Input('buffer')
  isBuffer = false;

  @Input()
  length: number;

  trackStyle: any = {};

  ngOnInit(): void {

  }

  ngOnChanges(changes: SimpleChanges): void {
    const lengthChange = changes['length'];
    if (lengthChange) {
      if (this.isVertical) {
        this.trackStyle.height = `${this.length}%`;
        this.trackStyle.width = null;
        this.trackStyle.left = null;
      } else {
        this.trackStyle.width = `${this.length}%`;
        this.trackStyle.height = null;
        this.trackStyle.bottom = null;
      }
    }
  }


}
